<template>
  <div class="app">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>章节管理</el-breadcrumb-item>
      <el-breadcrumb-item>章节删除管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 开始 -->
    <!-- table 数据展示 开始-->
    <!--  -->
    <el-table
      :data="bookTableData"
      v-loading="loading"
      stripe
      style="width: 100%"
      @row-click="chapterDetails"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="drag-item-title ">
            <el-row>
              <el-col class="line" :span="4">
                章节名
              </el-col>
              <el-col class="line" :span="4">
                上架时间
              </el-col>
              <el-col class="line" :span="4">
                字数
              </el-col>
              <el-col class="line" :span="4">
                章节状态
              </el-col>
              <el-col :span="3">
                操作
              </el-col>
            </el-row>
          </div>
          <div
            v-for="(item, i) in props.row.chapterList"
            :key="item._id"
            class="text item"
          >
            <el-row>
              <el-col class="line" :span="4"
                >&nbsp;{{ item.chapterName }}</el-col
              >
              <el-col class="line" :span="4">{{
                item.chapterLaunchTime
              }}</el-col>
              <el-col class="line" :span="4">{{ item.chapterNumber }}</el-col>
              <el-col
                :class="
                  'line ' +
                    (item.chapterStatus == 1 ? 'normal' : 'off-the-shelf')
                "
                :span="4"
                >{{ item.chapterStatus == 1 ? '正常' : '已下架' }}</el-col
              >
              <el-col :span="3">
                <el-button
                  v-if="item.is_system != 1"
                  type="text"
                  size="mini"
                  class="my-el-button-text"
                  @click="deleCode(i, item, props.row)"
                  >删除</el-button
                >
                <el-button
                  v-if="item.is_system != 1"
                  type="text"
                  size="mini"
                  class="my-el-button-text"
                  @click="enditCode(i, item, props.row)"
                  >恢复</el-button
                >
                <el-button
                  v-if="item.is_system != 1"
                  type="text"
                  size="mini"
                  class="my-el-button-text"
                  @click="queryCode(i, item, props.row)"
                  >详情</el-button
                >
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" fixed width="50"> </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="bookName"
        label="书籍名称"
        width="150"
      >
      </el-table-column>
      <el-table-column prop="bookAuthor" label="书籍作者" width="120">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="bookIntroduction"
        label="书籍简介"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="" label="书籍封面" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.bookCover" width="80px" height="100px" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="bookLaunchTime" label="书籍上架时间" width="155">
        <template slot-scope="scope">
          {{ scope.row.bookLaunchTime }}
        </template>
      </el-table-column>
      <el-table-column prop="bookEndOrSerial" label="完结或连载" width="120">
        <template slot-scope="scope">
          <div :class="scope.row.bookEndOrSerial == 2 ? 'end' : 'serial'">
            {{ scope.row.bookEndOrSerial == 1 ? '连载中' : '已完结' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="bookNumberOfWords" label="字数总数" width="120">
      </el-table-column>
      <el-table-column prop="bookNumberOfHits" label="点击数" width="120">
      </el-table-column>
      <el-table-column prop="bookToUpdate" label="最新更新时间" width="155">
        <template slot-scope="scope">
          {{
            scope.row.bookToUpdate == '1970-01-1 8:0:0'
              ? '暂无更新'
              : scope.row.bookToUpdate
          }}
        </template>
      </el-table-column>
      <el-table-column prop="bookGeneralSection" label="总章节" width="120">
      </el-table-column>
      <el-table-column prop="bookClassification" label="书籍分类" width="120">
      </el-table-column>
      <el-table-column prop="bookCollection" label="收藏数" width="120">
      </el-table-column>
      <el-table-column prop="bookStatus" label="书籍状态" width="120">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button
              size="mini"
              :class="scope.row.bookStatus == 1 ? 'my-el-button' : ''"
              :type="scope.row.bookStatus == 1 ? 'primary' : 'danger'"
            >
              {{ scope.row.bookStatus == 1 ? '上架中' : '已下架'
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu></el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 开始-->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryBookCondition.page"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="queryBookCondition.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="'《' + bookDetails.bookName + '》小说 章节目录'"
      :visible.sync="dialogTableVisible"
    >
      <div class="chapterBody">
        <div class="drag-item-title ">
          <el-row>
            <el-col class="line" :span="6">
              章节名
            </el-col>
            <el-col class="line" :span="5">
              上架时间
            </el-col>
            <el-col class="line" :span="4">
              字数
            </el-col>
            <el-col class="line" :span="3">
              章节状态
            </el-col>
          </el-row>
        </div>

        <div
          :class="'drag-item ' + (item.selectFlag ? 'selectChapter' : '')"
          v-for="(item, i) in chapterList"
          :key="i"
        >
          <el-row>
            <el-col class="line" :span="6"
              >&nbsp;{{
                '第' + numForStr(i + 1) + '章节  ' + item.chapterName
              }}</el-col
            >
            <el-col class="line" :span="5">{{ item.chapterLaunchTime }}</el-col>
            <el-col class="line" :span="4">{{ item.chapterNumber }}</el-col>
            <el-col
              :class="
                'line ' + (item.chapterStatus == 1 ? 'normal' : 'off-the-shelf')
              "
              :span="3"
              >{{ item.chapterStatus == 1 ? '正常' : '已下架' }}</el-col
            >
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { bookQueryPage, bookQueryTotal } from '@/network/bookManager'
import {
  chapterDustbin,
  queryChapterLately,
  modifyChapterByBookId,
  removeChapterByBookId
} from '@/network/chapterManager'
import { timeStampFormatStr } from '@/util/dataTimeUtil'
export default {
  data() {
    return {
      hasChildren: true,
      // table 数据
      bookTableData: [],
      chapterList: [],
      // 加载动画
      loading: false,
      // 查询条件
      queryBookCondition: {
        page: 1,
        size: 5,
        search: '',
        authorId: ''
      },
      total: 0,
      // 书籍详情
      bookDetails: {},
      dialogTableVisible: false,
      role: {},
      user: {}
    }
  },
  methods: {
    // 查询书籍信息
    async queryBook() {
      this.loading = true // 开启loading
      if (this.role.roleName != '超级管理员') {
        this.queryBookCondition.authorId = this.user._id
      }
      let res = await chapterDustbin(this.queryBookCondition)
      console.info(res)
      this.bookTableData = [] // 置空原数据
      let bookList = JSON.parse(res.resp_data)
      console.info(bookList)
      this.total = bookList.total // 设置总数

      for (let rs in bookList.list) {
        this.bookTableData.push(bookList.list[rs])
        this.bookTableData[rs].bookLaunchTime = this.timeStampFormatStr(
          this.bookTableData[rs].bookLaunchTime
        )
        this.bookTableData[rs].bookToUpdate =
          this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate) ==
          '1970-01-1 8:0:0'
            ? '暂无更新'
            : this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate)
      }
      console.info(this.bookTableData)
      this.loading = false // 关闭loading
    },
    timeStampFormatStr,
    // 章节详情
    chapterDetails(row, column, event) {
      console.info('我是章节详情')
      console.info(row)
      console.info(column)
      console.info(event)
    },
    // size数据改变
    handleSizeChange(val) {
      this.queryBookCondition.size = val
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryBookCondition.page = val
    },
    // 将 阿拉伯数字123 转换成 字符串数字一二三
    numForStr(n) {
      var cnum = [
        '零',
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十'
      ]
      var s = ''
      n = '' + n // 数字转为字符串
      for (var i = 0; i < n.length; i++) {
        s += cnum[parseInt(n.charAt(i))]
      }
      if (s.length == 2) {
        // 两位数的时候
        // 如果个位数是0的时候，令改成十
        if (s.charAt(1) == cnum[0]) {
          s = s.charAt(0) + cnum[10]
          // 如果是一十改成十
          if (s == cnum[1] + cnum[10]) {
            s = cnum[10]
          }
        } else if (s.charAt(0) == cnum[1]) {
          // 如果十位数是一的话改成十
          s = cnum[10] + s.charAt(1)
        }
      }
      return s
    },
    // 修改按钮
    enditCode(i, item, bookDetails) {
      this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          item.chapterStatus = 1
          modifyChapterByBookId(item)
          console.info(i)
          bookDetails.chapterList.splice(i, 1)
          console.info(bookDetails.chapterList)
          this.$message.success('修改成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })

      console.info(i)
      console.info(item)
    },
    // 删除按钮
    deleCode(i, item, bookDetails) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeChapterByBookId(item._id)
          bookDetails.chapterList.splice(i, 1)
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      console.info(i)
      console.info(item)
    },
    // 查询按钮
    async queryCode(i, item, bookDetails) {
      this.bookDetails = bookDetails
      let res = await queryChapterLately(item.chapterBookId)
      this.chapterList = []
      for (let rs in res.data) {
        let obj = JSON.parse(res.data[rs])
        obj.chapterLaunchTime = timeStampFormatStr(obj.chapterLaunchTime.$date)
        this.chapterList.push(obj)
      }
      this.dialogTableVisible = true
      console.info(res)
      console.info(i)
      console.info(item)
    }
  },
  // 监听属性
  watch: {
    'queryBookCondition.page': {
      // 页码发生变化
      handler: function() {
        this.queryBook()
      }
    },
    'queryBookCondition.size': {
      // 每页多少条发生变化
      handler: function() {
        this.queryBook()
      }
    }
  },
  // vue 生命周期方法
  async mounted() {
    this.role = JSON.parse(sessionStorage.getItem('role'))
    console.info(this.role)
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.queryBook()
  }
}
</script>
<style lang="less" scoped>
.drag-item {
  padding-top: 7px;
  border-top: 1px solid rgb(226, 223, 223);
}
.drag-item:last-child {
  border-bottom: 1px solid rgb(226, 223, 223);
}
.drag-item-title {
  border-top: none;
  padding-bottom: 10px;
}
.box-card {
  margin-top: 20px;
}
.el-col-6 {
  width: 200px;
  height: 100%;
}
.chapterBody {
  margin: 10px 10px;
}
.selectChapter {
  color: #f56c6c;
}
.count {
  display: inline-block;
  margin: 5px 0px 5px 5px;
}
.normal {
  color: #67ca3a;
}
.off-the-shelf {
  color: #f56c6c;
}
</style>
